<template>
    <view class="page">
        <popup-loading ref="popup" :animation="false"></popup-loading>

        <block v-if="dataList && dataList.length > 0">
            <view class="equipment-list">
                <view class="item" v-for="equipment in dataList" :key="equipment.id"
                    @click="openPage('/pageA/equipment-detail/index?device_id='+equipment.id)">
                    <Equipment :equipment="equipment" class="v-input"></Equipment>
                </view>

                <view class="equipment skeleton" v-if="dataListLoading">
                    <view class="equipment-device_logo-view">
                        <view class="status"> </view>
                        <image :lazy-load="true" class="device_logo skeleton-rect" mode="widthFix"></image>
                    </view>
                    <view class="equipment-main skeleton-rect">
                        <text class="title"> </text>
                        <view class="line">
                            <image :lazy-load="true" class="icon" mode="widthFix"></image>
                            <text></text>
                            <text></text>
                        </view>
                        <view class="line">
                            <image :lazy-load="true" class="icon" mode="widthFix"></image>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 加载状态提示 -->
            <view class="loading" v-if="loading && dataList.length > 0">
                <view class="loading-icon"></view>
                <text>加载中...</text>
            </view>
            <view class="no-more" v-if="!hasMore && dataList.length > 0">
                没有更多数据了
            </view>
        </block>
    </view>
</template>

<script>
    import viewModule from "@/common/mixins/view-module";
    import {
        getDateTime
    } from "@/common/util.js";
    import popupLoading from "@/components/public/loading/popup";
    import {
        delayFunc
    } from "@/common/util";
    import {
        mapState
    } from "vuex";
    import {
        imgBaseUrl,
        imgBaseUrlV1
    } from "@/common/config";
    import noData from "@/components/public/noData/noData";
    import Equipment from "@/components/public/item/equipment";
    export default {
        mixins: [viewModule],
        components: {
            popupLoading,
            noData,
            Equipment,
        },
        computed: {
            ...mapState("User", ["userInfo"]),
        },
        data() {
            return {
                imgBaseUrl,
                imgBaseUrlV1,
                isLoadingFinish: "",
                listQuery: {
                    search: null,
                    enterpriseId: null,
                    type: 0,
                },
                page: 1, // 当前页码
                limit: 5, // 每页数量
                hasMore: true, // 是否还有更多数据
                loading: false, // 是否正在加载中
                type: ""
            };
        },
        onLoad(e) {
            if (e.type) {
                this.type = e.type;
                this.getEquipmentList()
            }

            let title;;
            console.log(Number(e.type))
            switch (Number(e.type)) {
                case 2:
                    title = "设备在线列表";
                    break;
                case 3:
                    title = "设备离线列表";
                    break;
                case 4:
                    title = "设备报警列表";
                    break;
                default:
                    title = "设备列表";
                    break;
            }
            uni.setNavigationBarTitle({
                title: title,
                success() {
                    console.log('标题设置成功', title);
                },
                fail(err) {
                    console.log('标题设置失败', err);
                }
            })
        },
        methods: {
            getEquipmentList(isLoadMore = false) {

                // 如果正在加载或没有更多数据，则返回
                if (this.loading || !this.hasMore) return;
                console.log(this.page, "a1")
                // 如果是加载更多，则增加页码
                if (isLoadMore) {
                    this.page++;
                } else {
                    // 否则重置页码
                    this.page = 1;
                }
                console.log(this.page, "a2")
                this.loading = true;
                let params = {
                    page: this.page,
                    limit: this.limit,
                    type: this.type
                }
                this.$http.get('/getDeviceList', {
                    params
                }).then(res => {
                    this.loading = false;

                    // 处理数据
                    if (isLoadMore) {
                        // 加载更多，拼接数据
                        this.dataList = [...this.dataList, ...res.data.data];
                    } else {
                        // 重新加载，替换数据
                        this.dataList = res.data.data;
                    }

                    // 判断是否还有更多数据
                    // 假设当返回的数据少于每页数量时，表示没有更多数据了
                    this.hasMore = res.data.data.length >= this.limit;
                }).catch((err) => {
                    this.loading = false;
                    // 如果是加载更多失败，恢复页码
                    if (isLoadMore) {
                        this.page--;
                    }
                    // 显示错误提示
                    this.$refs.message.error('加载失败，请重试');
                    console.error('获取列表失败:', err);
                });
            },
            openPage(url) {
                uni.navigateTo({
                    url: url,
                });
            },
        },
        // 页面滚动到底部时触发
        onReachBottom() {
            console.log(this.page, "a4")
            // 延迟加载，避免频繁触发
            setTimeout(() => {
                this.getEquipmentList(true);
            }, 300);
        },
        // 下拉刷新
        onPullDownRefresh() {
            console.log(this.page, "a3")
            // 重新加载第一页数据
            this.getEquipmentList().then(() => {
                // 停止下拉刷新动画
                uni.stopPullDownRefresh();
            });
        },
    };
</script>

<style lang="scss" scoped>
    .no-data-box {
        height: 100vh;
        background: linear-gradient(180deg, #0d1523 0%, #102945 100%);
    }

    .page {
        min-height: 100vh;
        background: linear-gradient(180deg, #0d1523 0%, #102945 100%);
    }

    .equipment-list {
        padding: 20rpx;

        .item {
            padding: 15rpx;
            background: linear-gradient(270deg, #112849 0%, #153d6e 100%);
            border-radius: 10rpx;
            display: flex;
            flex-direction: row;
            margin-bottom: 20rpx;
            overflow: hidden;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    /* 加载状态样式 */
    .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30rpx 0;
        color: #fff;
        font-size: 24rpx;

        .loading-icon {
            width: 30rpx;
            height: 30rpx;
            border: 2rpx solid #fff;
            border-bottom-color: transparent;
            border-radius: 50%;
            animation: loading 1s linear infinite;
            margin-right: 15rpx;
        }
    }

    .no-more {
        text-align: center;
        padding: 30rpx 0;
        color: #ccc;
        font-size: 24rpx;
    }
</style>